<template>
  <div class="container">
    <div v-for="collection in collectionList" :key="collection.id"
      @click="toWorksShow(collection.worksId)">
      <van-swipe-cell>
        <van-card :desc="dateFormate1(collection.updateTime)" :title="collection.worksTitle"
          class="goods-card" :thumb="minioUrl+collection.worksFImg" />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button"
            @click="deleteCollection(collection.id)" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../utils/index';
import { ElMessage } from 'element-plus'
import { SwipeCell, Button, Card } from 'vant';
import { minioUrl } from '../../base/index';
export default {
  name: 'GCollection',
  data () {
    return {
      collectionList: [],
      pageNum: 1,
      pageSize: 100,
      minioUrl,
    }
  },
  components: {
    VanSwipeCell: SwipeCell, VanButton: Button, VanCard: Card
  },
  mounted () {
    this.getCollections(1, this.pageSize);
  },
  methods: {
    //获取收藏列表
    getCollections (pageNum, pageSize) {
      this.$axios.get("/collection/" + pageNum + "/" + pageSize).then((res) => {
        console.log(res)
        if (res.flag) {
          if (res.data.length < 1) {
            // this.morePhotos = false
          } else {
            for (var key in res.data) {
              this.collectionList.push(res.data[key]);
            }
          }
        }
      })
    },
    //取消收藏
    deleteCollection (id) {
      this.$axios.delete("/collection/" + id).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
          this.collectionList = this.collectionList.filter(function (item) {
            return item.id != id;
          });
        }
      })
    },
    toWorksShow (worksId) {
      this.$router.push("/works/show/" + worksId);
    },
    dateFormate1 (date) {
      return dateFormat(date, 4);
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>